// base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTMYRESUME } from './store/actions/pagemyresume'
import { UPDATEPAGEMYRESUME } from './store/types/pagemyresume'
import { UPDATEUSERINFO } from '../../store/types/userinfo'
// less
import './index.less'

import NetworkError from '../../components/taro-ui/network-error'
import If from '../../components/page-components/if'
import scaleImageSrc from '../../util/pagemethods/scaleImageSrc'
import { dealImgUrl, avater } from '../../configuration/staticimg'
import EducationCard from '../../components/page-components/education-card/index'
import WorkExpCard from '../../components/page-components/work-exp-card/index'
import IntentionCard from '../../components/page-components/intention-card/index'

const mapActiontoProps = dispatch => ({
  updateState(payload) {
    dispatch({
      type: UPDATEPAGEMYRESUME,
      payload: {
        ...payload
      }
    })
  },
  updateUserState(payload) {
    dispatch({
      type: UPDATEUSERINFO,
      payload: {
        ...payload
      }
    })
  },
  dorequest(payload) {
    return new Promise(resolve => {
      let promise = DOREQUESTMYRESUME(payload)
      dispatch(promise)
      promise.payload.then(data => {
        resolve(data)
      })
    })
  }
})

@connect(
  ({ pagemyresume, userinfo }) => ({
    ...pagemyresume,
    ...userinfo
  }),
  mapActiontoProps
)
class MyResume extends Component {
  config = {
    navigationBarTitleText: '我的简历'
  }

  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentDidShow() {
    // onshow
    this.queryWrap()
  }

  componentDidHide() {
    // onhide
  }

  componentWillUnmount() {
    // onUnload
    this.props.updateState({
      preview: false
    })
  }

  queryWrap = () => {
    this.getUserJL()
  }
  getUserJL = () => {
    const { userId, degreeWrapList } = this.props
    if (userId) {
      this.getInfo({ userId, degreeWrapList })
    }
  }

  getInfo = ({ userId, degreeWrapList }) => {
    this.props.dorequest({ userId, degreeWrapList })
  }

  onReload = () => {
    this.queryWrap()
  }
  delay(time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }
  openPic = e => {
    const { elegantDemeanour = [] } = this.props
    const current = dealImgUrl(e.currentTarget.dataset.url)
    Taro.previewImage({
      current, // 当前显示图片的http链接
      urls: elegantDemeanour.map(f => dealImgUrl(f.pic)) // 需要预览的图片http链接列表
    })
  }

  render() {
    const {
      userInfo = {},
      wantWork = [],
      educationInformation = [],
      workExp = [],
      elegantDemeanour = [],
      userAvator,
      userName,
      extra,
      userId,
      userInfoC: { gender }
    } = this.props
    return (
      <View className="MyResume_id23623">
        <NetworkError visible={this.props.networkerror} onReload={this.onReload} />
        <View className="resume-review">
          <View className="resume-top">
            <Image
              className="mymessageright"
              src={scaleImageSrc(userAvator) || avater(gender, userId)}
              mode="aspectFill"
              lazy-load
            />
            <View className="resume-top-right">
              <Text className="user-name">{userName}</Text>
              <View className="usrinfo-view">
                <Text className="age">{userInfo.age}</Text>
                <Text>{extra}</Text>
              </View>
            </View>
          </View>
          <View className="self-recommend">
            <View className="self-recommend-top" />
            <View className="self-recommend-bottom">
              <Text className="self-recommend-label">
                自我评价：
                <Text className="self-recommend-content">
                  {userInfo.intro || '这家伙很懒,什么都没写'}
                </Text>
              </Text>
            </View>
          </View>
          <If visible={wantWork.length}>
            <View className="job-intention">
              <View className="job-intention-title">
                <Text className="title-name">求职意向</Text>
                <Text className="title-state">{userInfo.jobStatus}</Text>
              </View>
              <View className="job-intention-item">
                {wantWork.map((item, index) => {
                  let comprehensive = JSON.parse(item.comprehensive)
                  let workNature = comprehensive.workNature[0]
                  let workPlace = comprehensive.workPlace || []
                  let wantWorkId = item.id
                  let jobPlace = item.jobPlace
                  return (
                    <IntentionCard
                      workNature={workNature}
                      workPlace={workPlace}
                      comprehensive={comprehensive}
                      wantWorkId={wantWorkId}
                      index={index}
                      jobPlace={jobPlace}
                      onTap={this.jumpTo}
                    />
                  )
                })}
              </View>
            </View>
          </If>
          <If visible={educationInformation.length}>
            <View className="education-info">
              <Text className="education-info-title">教育信息</Text>
              {educationInformation.map(e => (
                <View key={e.id} className="education-item-view">
                  <EducationCard dataSource={e} />
                </View>
              ))}
            </View>
          </If>
          <If visible={workExp.length}>
            <View className="job-experience">
              <Text className="experience-title">工作经验</Text>
              <View className="experience-content">
                {workExp.map(e => (
                  <View key={e.id} className="experience-item-view">
                    <WorkExpCard dataSource={e} />
                  </View>
                ))}
              </View>
            </View>
          </If>
          <If visible={elegantDemeanour.length}>
            <View className="photo-alum">
              <Text className="photo-alum-title">我的相册</Text>
            </View>
          </If>
        </View>
        <If visible={elegantDemeanour.length}>
          <ScrollView className="photo-alum-img-view" scrollX>
            {elegantDemeanour.map((e, i) => (
              <Image
                key={i}
                mode="aspectFill"
                className={`photo-alum-img ${i === 0 ? 'photo-alum-img-first' : ''} ${
                  i === elegantDemeanour.length - 1 ? 'photo-alum-img-last' : ''
                }`}
                src={scaleImageSrc(e.pic, 460)}
                data-url={e.pic}
                onClick={this.openPic}
              />
            ))}
          </ScrollView>
        </If>
      </View>
    )
  }
}

export default MyResume
